<template>
    <div class="ImageText">
           <div class="text" :key="index"  v-for="(v,index) in url3">
        
               <img :src="v" alt=""  @click="fun(index)">
            <!-- </router-link> -->
               <div class="t1">
                   <div style="font-size: 14px; height: 18px; overflow: hidden;">{{arr1[index]}}</div>
                   <div style="font-size: 12px; color: gray; overflow: hidden; height: 18px;">{{ arr2[index] }}</div>
               </div>
               <div class="t3">
                   <div class="a4">赠品</div>
                   <div class="a5">限时</div>
               </div>
               <div class="t2">
                   <div class="a2">{{arr3[index]}}</div>
                   <div class="a3">{{arr4[index]}}</div>
               </div>
               
           </div>
           <span style="position: fixed; bottom: 50px; right: 10px;"><img style="width: 55px;" src="https://static.asus.com.cn/static/wap/app/images/home/button_serve.png" alt="" @click="fun1"></span>
       </div>
</template>

<script>

export default {
   data(){
       return {
             url3:[],
           arr1:[],
           arr2:[],
           arr3:[],
           arr4:[]

       }
   },
   methods:{
   fun(index){
    // console.log(index);
    window.scrollTo({left:0,top:0})
    this.$router.push({
        path:'/detail',
        query:{
            id:index,
        }
    }).catch(err=>{})
   },
   fun1(){
    this.$router.push('/Customer').catch(err=>{})
   }
   },
   mounted(){
    this.$http({
        url:"http://localhost:3000/selected ",
        method:"get",
    }).then(res=>{
        // console.log(res.data[0].data.data1);
        res.data[0].data.data1.forEach(element => {
            // console.log(element);
            this.arr1.push(element.h1)
            this.arr2.push(element.h2)
            this.arr3.push(element.price)
            this.arr4.push(element.priceold)
            this.url3.push(element.img1)
        });

        // res.data[0].data.data1.forEach(element => {
        //     // console.log(element.img1);
        //     this.myimg.push(element.img1)
            
        // });
        // res.data.forEach(element => {
        //     // this.images.push(element)
        // });
    })

    },
   
}
</script>

<style scoped>
.ImageText{
   width: 95%;
   display: flex;
   margin-left: .5rem;
   border-radius: 1rem;
   flex-wrap: wrap;
   background-color: #f6f6f6;
   justify-content: space-between;
}
.ImageText .text{
   border-radius: 1rem;
   width: 48%;
   height: 300px;
   border-radius: 1rem;
   background-color: white;
   margin-bottom: 1rem;
}
.ImageText .text img{
   width:100%;
   background-color: #c82519;
   margin-top: 10px;
   border-radius: 1rem 1rem 0 0;
}
.ImageText .text .t1{
   height: 2.8rem;
   font-size: 14px;
   padding: 0px 5px 0px;
}
.ImageText .text .t1>div .supermarket{
   display: inline-block;
   width: 5rem;
   height: 1.3rem;
   color: white;
   border-radius: .5rem;
   text-align: center;
   background-color: green;
}
.ImageText .text .t1>div{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
}
.ImageText .text .t2{
   display: flex;
   justify-content: space-between;
   height: 2rem;
}
.ImageText .text .t2 .a2{
   height: 2rem;
   font-size: 18px;
   color: red;
}
.ImageText .text .t2 .a3{
    height: 2rem;
   font-size: 14px;
   color: gray;
   text-decoration: line-through;
}
.ImageText .text .t3{
   display: flex;
   height: 2rem;
   /* justify-content: space-between; */
}
.ImageText .text .t3 .a4{
   height: 1.5rem;
   color: white;
   background-color: #f5a623;
   border-radius: 5px;
   margin-left: 10px;
   width: 40px;
   text-align: center;
   font-size: 12px;
   line-height: 1.5rem;
}
.ImageText .text .t3 .a5{
   height: 1.5rem;
   border-radius: 5px;
   color: red;
   border: 1px solid red;
   margin-left: 10px;
   width: 40px;
   text-align: center;
   line-height: 1.5rem;
   font-size: 12px  ;
}
</style>